<template>
  <div class="home">
    <div class="container py-5">
      <h1 class="text-center mb-5">使用命理定义 定义非凡人生</h1>
      
      <div class="row g-4">
        <!-- 算命 -->
        <div class="col-md-6 col-lg-3">
          <div class="card service-card h-100">
            <div class="card-body text-center">
              <div class="icon-wrapper mb-3">
                <i class="bi bi-stars"></i>
              </div>
              <h3 class="card-title">算命</h3>
              <p class="card-text">基于您的生辰八字，为您提供全面命理分析，揭示您的命运轨迹。</p>
              <ul class="list-unstyled text-start">
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>八字分析</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>五行分析</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>命运预测</li>
              </ul>
              <router-link to="/analysis" class="btn btn-outline-primary mt-3">开始算命</router-link>
            </div>
          </div>
        </div>
        
        <!-- 问财 -->
        <div class="col-md-6 col-lg-3">
          <div class="card service-card h-100">
            <div class="card-body text-center">
              <div class="icon-wrapper mb-3">
                <i class="bi bi-cash-coin"></i>
              </div>
              <h3 class="card-title">问财</h3>
              <p class="card-text">分析您的财运状况，提供理财建议，帮助您把握财富机遇。</p>
              <ul class="list-unstyled text-start">
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>财运分析</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>投资建议</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>财富规划</li>
              </ul>
              <router-link to="/wealth" class="btn btn-outline-primary mt-3">财运咨询</router-link>
            </div>
          </div>
        </div>
        
        <!-- 问事业 -->
        <div class="col-md-6 col-lg-3">
          <div class="card service-card h-100">
            <div class="card-body text-center">
              <div class="icon-wrapper mb-3">
                <i class="bi bi-briefcase"></i>
              </div>
              <h3 class="card-title">问事业</h3>
              <p class="card-text">分析您的事业发展路径，找到适合您的职业方向，助您事业腾飞。</p>
              <ul class="list-unstyled text-start">
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>职业规划</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>事业分析</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>发展建议</li>
              </ul>
              <router-link to="/career" class="btn btn-outline-primary mt-3">事业咨询</router-link>
            </div>
          </div>
        </div>
        
        <!-- 问姻缘 -->
        <div class="col-md-6 col-lg-3">
          <div class="card service-card h-100">
            <div class="card-body text-center">
              <div class="icon-wrapper mb-3">
                <i class="bi bi-heart"></i>
              </div>
              <h3 class="card-title">问姻缘</h3>
              <p class="card-text">解析您的感情线，明确您的择偶标准，指引您找到真爱。</p>
              <ul class="list-unstyled text-start">
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>姻缘分析</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>配对建议</li>
                <li><i class="bi bi-check-circle-fill text-success me-2"></i>婚姻指导</li>
              </ul>
              <router-link to="/relationship" class="btn btn-outline-primary mt-3">姻缘咨询</router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="wisdom-text text-center mt-5">一善染心，万劫不朽。百灯旷照，千里通明；一勤养性，百念自清。十载不倦，万道大成。</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
/* 首页整体样式 */
.home {
  /* background-color: #faf5ff; */
  min-height: 100vh;
}
.service-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.service-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.service-card:hover .icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(66, 185, 131, 0.3);
}

.service-card:hover .card-title {
  color: #42b983;
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(66, 185, 131, 0.2) 0%, rgba(66, 185, 131, 0.1) 100%);
  margin-bottom: 1.5rem;
  transition: all 0.4s ease;
  position: relative;
}

.icon-wrapper::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 2px dashed rgba(66, 185, 131, 0.3);
  animation: rotate 20s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover .icon-wrapper::after {
  opacity: 1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.icon-wrapper i {
  font-size: 2.5rem;
  color: #42b983;
  transition: all 0.4s ease;
}

.service-card .card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.service-card .card-text {
  color: #6c757d;
  margin-bottom: 1.5rem;
}

.service-card ul {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

.service-card ul li {
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 0.5rem;
  transition: transform 0.3s ease;
}

.service-card ul li:hover {
  transform: translateX(5px);
}

.service-card .btn {
  border-radius: 30px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border-width: 2px;
}

.service-card .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 为每个卡片设置不同颜色 */
.col-md-6:nth-child(1) .icon-wrapper {
  background: linear-gradient(135deg, rgba(66, 185, 131, 0.2) 0%, rgba(66, 185, 131, 0.1) 100%);
}

.col-md-6:nth-child(1) .icon-wrapper i {
  color: #42b983;
}

.col-md-6:nth-child(1) .service-card:hover .card-title {
  color: #42b983;
}

.col-md-6:nth-child(2) .icon-wrapper {
  background: linear-gradient(135deg, rgba(247, 184, 74, 0.2) 0%, rgba(247, 184, 74, 0.1) 100%);
}

.col-md-6:nth-child(2) .icon-wrapper i {
  color: #f7b84a;
}

.col-md-6:nth-child(2) .service-card:hover .card-title {
  color: #f7b84a;
}

.col-md-6:nth-child(3) .icon-wrapper {
  background: linear-gradient(135deg, rgba(74, 141, 247, 0.2) 0%, rgba(74, 141, 247, 0.1) 100%);
}

.col-md-6:nth-child(3) .icon-wrapper i {
  color: #4a8df7;
}

.col-md-6:nth-child(3) .service-card:hover .card-title {
  color: #4a8df7;
}

.col-md-6:nth-child(4) .icon-wrapper {
  background: linear-gradient(135deg, rgba(232, 90, 173, 0.2) 0%, rgba(232, 90, 173, 0.1) 100%);
}

.col-md-6:nth-child(4) .icon-wrapper i {
  color: #e85aad;
}

.col-md-6:nth-child(4) .service-card:hover .card-title {
  color: #e85aad;
}
</style>